<template>
  <div class="session-replay-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 左侧信息面板 -->
    <div class="left-sidebar">
      <!-- 页面标题和关闭按钮 -->
      <div class="sidebar-header">
        <h2 class="sidebar-title">
          <i class="fa fa-play-circle"></i>
          SSH回放
        </h2>
        <el-button @click="goBack" class="close-button" size="small">
          <i class="fa fa-times"></i>
        </el-button>
      </div>

      <!-- 会话信息 -->
      <div class="session-info-card glass-effect" v-if="sessionInfo">
        <div class="card-header">
          <h3 class="card-title">
            <i class="fa fa-info-circle"></i>
            会话信息
          </h3>
        </div>
        <div class="session-details">
          <div class="detail-item">
            <span class="label">用户:</span>
            <span class="value">{{ sessionInfo.user }}</span>
          </div>
          <div class="detail-item">
            <span class="label">主机:</span>
            <span class="value">{{ sessionInfo.host }}</span>
          </div>
          <div class="detail-item">
            <span class="label">IP:</span>
            <span class="value">{{ sessionInfo.host_ip }}</span>
          </div>
          <div class="detail-item">
            <span class="label">开始:</span>
            <span class="value">{{ formatTime(sessionInfo.start_time) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">时长:</span>
            <span class="value">{{ formatDuration(sessionInfo.duration) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">命令:</span>
            <span class="value">{{ sessionInfo.command_count }}</span>
          </div>
        </div>
      </div>

      <!-- 命令列表 -->
      <div class="commands-section glass-effect" v-if="commands.length">
        <div class="card-header">
          <h3 class="card-title">
            <i class="fa fa-list"></i>
            执行命令
          </h3>
        </div>
        <div class="commands-list">
          <div
            v-for="(command, index) in commands"
            :key="index"
            :class="['command-item', { 'dangerous': command.is_dangerous }]"
            @click="seekToCommand(command)">
            <div class="command-time">{{ formatTime(command.timestamp) }}</div>
            <div class="command-text">{{ command.command }}</div>
            <div class="command-risk">
              <el-tag
                :type="getRiskTagType(command.risk_level)"
                size="small">
                {{ command.risk_level_display }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧终端区域 -->
    <div class="main-terminal-area">
      <!-- 终端显示区域 - 集成控制面板 -->
      <div class="terminal-section glass-effect">
        <div class="terminal-header">
          <div class="terminal-title">
            <i class="fa fa-terminal"></i>
            SSH终端回放
            <span class="session-id">{{ sessionId.substring(0, 8) }}...</span>
          </div>
          <div class="terminal-status">
            <span :class="['status-indicator', isPlaying ? 'playing' : 'paused']"></span>
            {{ isPlaying ? '播放中' : '已暂停' }}
          </div>
        </div>

        <!-- 终端内容区域 -->
        <div ref="terminalContainer" class="terminal-container"></div>

        <!-- 集成的控制面板 -->
        <div class="integrated-controls">
          <div class="control-row">
            <div class="controls">
              <el-button
                @click="togglePlay"
                :type="isPlaying ? 'warning' : 'primary'"
                class="control-btn play-btn"
                :disabled="!replayData.length">
                <i :class="isPlaying ? 'fa fa-pause' : 'fa fa-play'"></i>
                {{ isPlaying ? '暂停' : '播放' }}
              </el-button>

              <el-button @click="stopReplay" class="control-btn stop-btn" :disabled="!replayData.length">
                <i class="fa fa-stop"></i>
                停止
              </el-button>

              <el-button @click="resetReplay" class="control-btn reset-btn" :disabled="!replayData.length">
                <i class="fa fa-refresh"></i>
                重置
              </el-button>
            </div>

            <div class="speed-control">
              <span class="speed-label">播放速度:</span>
              <el-select v-model="playbackSpeed" class="speed-select" size="small">
                <el-option label="0.5x" :value="0.5"></el-option>
                <el-option label="1x" :value="1"></el-option>
                <el-option label="1.5x" :value="1.5"></el-option>
                <el-option label="2x" :value="2"></el-option>
                <el-option label="3x" :value="3"></el-option>
              </el-select>
            </div>
          </div>

          <div class="progress-section">
            <div class="time-info">
              <span class="current-time">{{ formatDurationTime(currentTime) }}</span>
              <span class="separator">/</span>
              <span class="total-time">{{ formatDurationTime(totalTime) }}</span>
            </div>

            <!-- 自定义火箭进度条 -->
            <div class="rocket-progress-container">
              <div class="progress-track">
                <!-- 星空轨道背景 -->
                <div class="track-stars">
                  <div class="star" v-for="n in 20" :key="n"
                       :style="{
                         left: Math.random() * 100 + '%',
                         animationDelay: Math.random() * 3 + 's',
                         animationDuration: (2 + Math.random() * 2) + 's'
                       }"></div>
                </div>

                <!-- 进度轨道 -->
                <div class="progress-rail" @click="handleTrackClick">
                  <!-- 已完成的轨道 -->
                  <div class="progress-fill" :style="{ width: currentProgress + '%' }">
                    <div class="progress-glow"></div>
                  </div>

                  <!-- 火箭 -->
                  <div class="rocket-container"
                       :style="{ left: currentProgress + '%' }"
                       :class="{ 'flying': isPlaying, 'boost': isPlaying && playbackSpeed > 1 }">
                    <div class="rocket">
                      <span class="rocket-body">🚀</span>
                      <div class="rocket-trail" v-if="isPlaying">
                        <div class="trail-particle" v-for="n in 3" :key="n"></div>
                      </div>
                      <div class="rocket-boost" v-if="isPlaying && playbackSpeed > 1">
                        <div class="boost-flame"></div>
                      </div>
                    </div>

                    <!-- 速度指示器 -->
                    <div class="speed-indicator" v-if="playbackSpeed !== 1">
                      {{ playbackSpeed }}x
                    </div>
                  </div>

                  <!-- 时间节点标记 -->
                  <div class="time-markers">
                    <div class="marker" v-for="(marker, index) in timeMarkers" :key="index"
                         :style="{ left: marker.position + '%' }"
                         :title="marker.label">
                      <div class="marker-dot"></div>
                      <div class="marker-label">{{ marker.label }}</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 进度条下方的装饰 -->
              <div class="progress-decorations">
                <div class="decoration-line"></div>
                <div class="progress-text">
                  <span class="progress-label">回放进度</span>
                  <span class="progress-percentage">{{ Math.round(currentProgress) }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from '@/utils/format'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import 'xterm/css/xterm.css'

const route = useRoute()
const router = useRouter()

// 获取会话ID
const sessionId = route.params.sessionId as string

// 响应式数据
const sessionInfo = ref<any>(null)
const replayData = ref<any[]>([])
const commands = ref<any[]>([])
const isPlaying = ref(false)
const currentTime = ref(0)
const totalTime = ref(0)
const currentProgress = ref(0)
const playbackSpeed = ref(1)

// 终端相关
const terminalContainer = ref<HTMLElement>()
let terminal: Terminal | null = null
let fitAddon: FitAddon | null = null

// 回放控制
let playbackTimer: number | null = null
let currentEventIndex = ref(0)
let startTime = 0

// 进度条相关
const timeMarkers = ref<Array<{position: number, label: string}>>([])

// 生成时间标记点
const generateTimeMarkers = () => {
  if (!totalTime.value) return

  const markers = []
  const intervals = [0, 25, 50, 75, 100] // 0%, 25%, 50%, 75%, 100%

  intervals.forEach(percent => {
    const timeAtPercent = (percent / 100) * totalTime.value
    markers.push({
      position: percent,
      label: formatDurationTime(timeAtPercent)
    })
  })

  timeMarkers.value = markers
}

// 处理轨道点击
const handleTrackClick = (event: MouseEvent) => {
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
  const clickX = event.clientX - rect.left
  const trackWidth = rect.width
  const clickPercent = (clickX / trackWidth) * 100

  // 限制在有效范围内
  const newProgress = Math.max(0, Math.min(100, clickPercent))
  seekTo(newProgress)
}

// 初始化终端
const initTerminal = async () => {
  await nextTick()

  if (!terminalContainer.value) return

  terminal = new Terminal({
    theme: {
      background: 'rgba(0, 0, 0, 0.8)',
      foreground: '#ffffff',
      cursor: '#00ff00',
      selection: 'rgba(255, 255, 255, 0.3)'
    },
    fontSize: 14,
    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
    cursorBlink: true,
    scrollback: 1000,
    disableStdin: true // 禁用输入，只用于回放
  })

  fitAddon = new FitAddon()
  terminal.loadAddon(fitAddon)

  terminal.open(terminalContainer.value)
  fitAddon.fit()

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    if (fitAddon) {
      fitAddon.fit()
    }
  })
}

// 获取回放数据
const fetchReplayData = async () => {
  try {
    const response = await axios.get(`/api/audit/sessions/${sessionId}/replay/`)
    const data = response.data

    sessionInfo.value = data.session_info
    replayData.value = data.replay_data || []
    commands.value = data.commands || []
    totalTime.value = data.total_time || 0

    console.log('回放数据加载完成:', {
      session: sessionInfo.value,
      events: replayData.value.length,
      commands: commands.value.length,
      totalTime: totalTime.value
    })

    // 生成时间标记点
    generateTimeMarkers()

  } catch (error) {
    console.error('获取回放数据失败:', error)
    ElMessage.error('获取回放数据失败')
  }
}

// 播放控制
const togglePlay = () => {
  if (isPlaying.value) {
    pauseReplay()
  } else {
    startReplay()
  }
}

const startReplay = () => {
  if (!replayData.value.length) return

  isPlaying.value = true
  startTime = Date.now() - (currentTime.value * 1000)

  playbackTimer = window.setInterval(() => {
    const elapsed = (Date.now() - startTime) / 1000 * playbackSpeed.value
    currentTime.value = elapsed
    currentProgress.value = totalTime.value > 0 ? (elapsed / totalTime.value) * 100 : 0

    // 播放当前时间点的事件
    playEventsAtTime(elapsed)

    // 检查是否播放完成
    if (elapsed >= totalTime.value) {
      stopReplay()
    }
  }, 50) // 20fps
}

const pauseReplay = () => {
  isPlaying.value = false
  if (playbackTimer) {
    clearInterval(playbackTimer)
    playbackTimer = null
  }
}

const stopReplay = () => {
  pauseReplay()
  currentTime.value = 0
  currentProgress.value = 0
  currentEventIndex.value = 0
  if (terminal) {
    terminal.clear()
  }
}

const resetReplay = () => {
  stopReplay()
}

// 播放指定时间点的事件
const playEventsAtTime = (targetTime: number) => {
  if (!terminal || !replayData.value.length) return

  // 播放所有应该在当前时间之前的事件
  while (currentEventIndex.value < replayData.value.length) {
    const event = replayData.value[currentEventIndex.value]

    if (event.timestamp > targetTime) {
      break
    }

    // 播放事件
    if (event.data_type === 'output') {
      terminal.write(event.data)
    } else if (event.data_type === 'resize') {
      try {
        const resizeData = JSON.parse(event.data)
        terminal.resize(resizeData.cols || 80, resizeData.rows || 24)
      } catch (e) {
        console.warn('解析resize数据失败:', e)
      }
    }

    currentEventIndex.value++
  }
}

// 跳转到指定进度
const seekTo = (progress: number) => {
  const targetTime = (progress / 100) * totalTime.value
  currentTime.value = targetTime
  currentProgress.value = progress

  // 重置终端和事件索引
  if (terminal) {
    terminal.clear()
  }
  currentEventIndex.value = 0

  // 播放到目标时间点
  playEventsAtTime(targetTime)

  // 如果正在播放，更新开始时间
  if (isPlaying.value) {
    startTime = Date.now() - (targetTime * 1000)
  }
}

// 跳转到指定命令
const seekToCommand = (command: any) => {
  const commandTime = new Date(command.timestamp).getTime() / 1000
  const sessionStartTime = new Date(sessionInfo.value.start_time).getTime() / 1000
  const relativeTime = commandTime - sessionStartTime

  if (relativeTime >= 0 && relativeTime <= totalTime.value) {
    const progress = (relativeTime / totalTime.value) * 100
    seekTo(progress)
  }
}

// 格式化持续时间（用于显示总时长）
const formatDuration = (seconds: number) => {
  if (!seconds) return '0秒'

  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)

  if (hours > 0) {
    return `${hours}小时${minutes}分${secs}秒`
  } else if (minutes > 0) {
    return `${minutes}分${secs}秒`
  } else {
    return `${secs}秒`
  }
}

// 格式化持续时间（用于进度条显示，格式：MM:SS 或 HH:MM:SS）
const formatDurationTime = (seconds: number) => {
  if (!seconds || seconds < 0) return '00:00'

  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)

  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

// 获取风险等级标签类型
const getRiskTagType = (riskLevel: string) => {
  const typeMap: Record<string, string> = {
    'low': 'success',
    'medium': 'warning',
    'high': 'danger',
    'critical': 'danger'
  }
  return typeMap[riskLevel] || 'info'
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 生命周期
onMounted(async () => {
  await fetchReplayData()
  await initTerminal()
})

onUnmounted(() => {
  if (playbackTimer) {
    clearInterval(playbackTimer)
  }
  if (terminal) {
    terminal.dispose()
  }
})
</script>

<style lang="scss" scoped>
/* 主容器 */
.session-replay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow: hidden; /* 防止无限滚动 */
  z-index: 1000; /* 确保在footer之上 */
}

/* 星空背景 */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}



/* 左侧信息面板 */
.left-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(164, 244, 186, 0.2);
  z-index: 100;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 侧边栏标题区域 */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(164, 244, 186, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-title i {
  font-size: 20px;
  color: rgba(164, 244, 186, 0.8);
}

.close-button {
  background: rgba(164, 244, 186, 0.2) !important;
  border: 1px solid rgba(164, 244, 186, 0.5) !important;
  color: rgba(164, 244, 186, 1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(10px) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  z-index: 1000 !important;
}

.close-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(164, 244, 186, 0.2), transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.close-button:hover {
  background: rgba(164, 244, 186, 0.2) !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  color: rgba(164, 244, 186, 1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(164, 244, 186, 0.2) !important;
}

.close-button:hover::before {
  left: 100%;
}

.close-button i {
  margin-right: 4px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 右侧终端区域 */
.main-terminal-area {
  position: fixed;
  top: 0;
  left: 350px;
  width: calc(100vw - 350px);
  height: 100vh;
  z-index: 10;
  overflow: hidden;
}

/* 玻璃效果基础样式 */
.glass-effect {
  background: rgba(164, 244, 186, 0.08);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.glass-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(164, 244, 186, 0.05) 0%,
    rgba(164, 244, 186, 0.02) 50%,
    rgba(164, 244, 186, 0.05) 100%);
  pointer-events: none;
  z-index: -1;
}

/* 终端区域样式 */
.terminal-section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.15);
  background: rgba(164, 244, 186, 0.05);
  flex-shrink: 0;
}

.terminal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(164, 244, 186, 0.9);
}

.terminal-title i {
  font-size: 18px;
  color: rgba(164, 244, 186, 0.8);
}

.session-id {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Monaco', 'Menlo', monospace;
  margin-left: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.status-indicator.playing {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  animation: pulse 2s infinite;
}

.status-indicator.paused {
  background: #ffaa00;
  box-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.terminal-container {
  flex: 1;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden; /* 移除滚动条 */
  border-radius: 0;
}

/* 集成的控制面板 */
.integrated-controls {
  padding: 20px;
  background: rgba(164, 244, 186, 0.1);
  border-top: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  min-height: 140px; /* 确保有足够的高度 */
}

/* 集成控制面板样式 */
.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.control-btn {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  min-width: 80px !important;
  height: 36px !important;
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.control-btn:hover::before {
  left: 100%;
}

.control-btn i {
  margin-right: 6px !important;
  position: relative !important;
  z-index: 1 !important;
}

.control-btn span {
  position: relative !important;
  z-index: 1 !important;
}

.play-btn {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 100, 0.25)) !important;
  color: rgba(0, 255, 136, 1) !important;
  border-color: rgba(0, 255, 136, 0.5) !important;
}

.play-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 100, 0.25)) !important;
  color: rgba(0, 255, 136, 1) !important;
  border-color: rgba(0, 255, 136, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2) !important;
  transform: translateY(-1px) !important;
}

.stop-btn {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.15), rgba(255, 50, 50, 0.15)) !important;
  color: rgba(255, 100, 100, 0.9) !important;
  border-color: rgba(255, 100, 100, 0.3) !important;
}

.stop-btn:hover {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.25), rgba(255, 50, 50, 0.25)) !important;
  color: rgba(255, 100, 100, 1) !important;
  border-color: rgba(255, 100, 100, 0.5) !important;
  box-shadow: 0 4px 15px rgba(255, 100, 100, 0.2) !important;
  transform: translateY(-1px) !important;
}

.reset-btn {
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), rgba(50, 100, 255, 0.15)) !important;
  color: rgba(100, 150, 255, 0.9) !important;
  border-color: rgba(100, 150, 255, 0.3) !important;
}

.reset-btn:hover {
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.25), rgba(50, 100, 255, 0.25)) !important;
  color: rgba(100, 150, 255, 1) !important;
  border-color: rgba(100, 150, 255, 0.5) !important;
  box-shadow: 0 4px 15px rgba(100, 150, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speed-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.speed-select {
  min-width: 80px;
}

:deep(.speed-select .el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(10px) !important;
}

:deep(.speed-select .el-input__inner) {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
}

/* 进度条区域 */
.progress-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.time-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Monaco', 'Menlo', monospace;
}

.current-time {
  color: rgba(164, 244, 186, 0.9);
  font-weight: 600;
}

.separator {
  color: rgba(255, 255, 255, 0.5);
}

.total-time {
  color: rgba(255, 255, 255, 0.7);
}

/* 火箭进度条样式 */
.rocket-progress-container {
  padding: 5px 15px;
  position: relative;
}

.progress-track {
  position: relative;
  height: 24px;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(20, 20, 40, 0.9) 50%,
    rgba(0, 0, 0, 0.8) 100%);
  border-radius: 12px;
  border: 1px solid rgba(164, 244, 186, 0.3);
  overflow: hidden;
  box-shadow:
    inset 0 1px 5px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(164, 244, 186, 0.1);
}

/* 星空轨道背景 */
.track-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 进度轨道 */
.progress-rail {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 28px;
  overflow: hidden;
}

/* 已完成的轨道 - 火箭喷火拖尾效果 */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255, 69, 0, 0.4) 0%,
    rgba(255, 140, 0, 0.5) 30%,
    rgba(255, 215, 0, 0.6) 60%,
    rgba(255, 255, 255, 0.4) 100%);
  border-radius: 18px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 140, 0, 0.8) 50%,
    rgba(255, 255, 255, 0.6) 100%);
  animation: fire-glow 1.5s infinite ease-in-out;
}

@keyframes fire-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.2);
  }
}

/* 火箭容器 */
.rocket-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 10;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rocket-container.flying {
  animation: rocket-fly 1s infinite ease-in-out;
}

.rocket-container.boost {
  animation: rocket-boost 0.5s infinite ease-in-out;
}

@keyframes rocket-fly {
  0%, 100% { transform: translateY(-50%) translateX(-50%) rotate(-2deg); }
  50% { transform: translateY(-50%) translateX(-50%) rotate(2deg); }
}

@keyframes rocket-boost {
  0%, 100% { transform: translateY(-50%) translateX(-50%) scale(1) rotate(-1deg); }
  50% { transform: translateY(-50%) translateX(-50%) scale(1.1) rotate(1deg); }
}

/* 火箭本体 */
.rocket {
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.rocket-body {
  font-size: 16px;
  transform: rotate(20deg); /* 让火箭头稍微向下一点 */
  filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.6));
  transition: all 0.3s ease;
}

.rocket-container:hover .rocket-body {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8));
}

/* 火箭尾迹 */
.rocket-trail {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 3px;
  pointer-events: none;
}

.trail-particle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255, 69, 0, 0.9) 0%,
    rgba(255, 140, 0, 0.7) 30%,
    rgba(255, 215, 0, 0.5) 60%,
    transparent 100%);
  border-radius: 1px;
  animation: trail-move 0.6s infinite ease-out;
}

.trail-particle:nth-child(2) { animation-delay: 0.15s; }
.trail-particle:nth-child(3) { animation-delay: 0.3s; }

@keyframes trail-move {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-30px) scale(0.3);
    opacity: 0;
  }
}

/* 加速火焰效果 */
.rocket-boost {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 18px;
  height: 4px;
  pointer-events: none;
}

.boost-flame {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255, 0, 0, 0.9) 0%,
    rgba(255, 140, 0, 0.8) 40%,
    rgba(255, 255, 255, 0.6) 80%,
    transparent 100%);
  border-radius: 3px;
  animation: boost-flicker 0.15s infinite ease-in-out;
}

@keyframes boost-flicker {
  0%, 100% { opacity: 0.8; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.2); }
}

/* 速度指示器 */
.speed-indicator {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 140, 0, 0.9);
  color: rgba(0, 0, 0, 0.8);
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(255, 140, 0, 0.4);
  animation: speed-bounce 0.6s infinite ease-in-out;
}

@keyframes speed-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2px); }
}

/* 时间节点标记 */
.time-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.marker {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.marker-dot {
  width: 6px;
  height: 6px;
  background: rgba(164, 244, 186, 0.8);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: marker-pulse 3s infinite ease-in-out;
}

.marker-label {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.marker:hover .marker-label {
  opacity: 1;
}

@keyframes marker-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); }
}

/* 进度条装饰 */
.progress-decorations {
  margin-top: 15px;
  position: relative;
}

.decoration-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(164, 244, 186, 0.3) 20%,
    rgba(164, 244, 186, 0.6) 50%,
    rgba(164, 244, 186, 0.3) 80%,
    transparent 100%);
  margin-bottom: 8px;
  animation: line-glow 3s infinite ease-in-out;
}

@keyframes line-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.progress-percentage {
  font-size: 12px;
  color: rgba(0, 234, 255, 0.9);
  font-weight: bold;
  font-family: 'Monaco', 'Menlo', monospace;
}

/* 左侧面板中的信息卡片 */
.session-info-card {
  margin-bottom: 20px;
  max-height: 300px;
  overflow: hidden;
}

.commands-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 400px);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.15);
  background: rgba(164, 244, 186, 0.05);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(164, 244, 186, 0.9);
}

.card-title i {
  font-size: 16px;
  color: rgba(164, 244, 186, 0.8);
}

/* 会话信息样式 */
.session-details {
  padding: 15px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(164, 244, 186, 0.1);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  min-width: 40px;
}

.detail-item .value {
  font-size: 12px;
  color: rgba(164, 244, 186, 0.9);
  font-weight: 600;
  text-align: right;
  max-width: 70%;
  word-break: break-all;
}

/* 命令列表样式 */
.commands-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  max-height: calc(100vh - 500px);
}

.commands-list::-webkit-scrollbar {
  width: 6px;
}

.commands-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.commands-list::-webkit-scrollbar-thumb {
  background: rgba(164, 244, 186, 0.3);
  border-radius: 3px;
}

.commands-list::-webkit-scrollbar-thumb:hover {
  background: rgba(164, 244, 186, 0.5);
}

.command-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.command-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(164, 244, 186, 0.1), transparent);
  transition: left 0.5s ease;
}

.command-item:hover {
  background: rgba(164, 244, 186, 0.1);
  border-color: rgba(164, 244, 186, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.command-item:hover::before {
  left: 100%;
}

.command-item.dangerous {
  border-color: rgba(255, 100, 100, 0.3);
  background: rgba(255, 100, 100, 0.05);
}

.command-item.dangerous:hover {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.5);
}

.command-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Monaco', 'Menlo', monospace;
  text-align: left;
}

.command-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Monaco', 'Menlo', monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(164, 244, 186, 0.2);
  word-break: break-all;
  line-height: 1.3;
}

.command-risk {
  text-align: left;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .left-sidebar {
    width: 300px;
  }

  .main-terminal-area {
    left: 300px;
    width: calc(100vw - 300px);
  }

  .rocket-progress-container {
    padding: 8px 10px;
  }

  .progress-track {
    height: 35px;
  }

  .rocket-body {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .left-sidebar {
    width: 250px;
    padding: 15px;
  }

  .main-terminal-area {
    left: 250px;
    width: calc(100vw - 250px);
  }

  .sidebar-title {
    font-size: 16px;
  }

  .control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .controls {
    justify-content: center;
  }

  .command-item {
    padding: 8px 10px;
  }

  .command-text {
    font-size: 10px;
  }

  .rocket-progress-container {
    padding: 6px 5px;
  }

  .progress-track {
    height: 30px;
  }

  .rocket-body {
    font-size: 16px;
  }

  .rocket-trail {
    width: 25px;
  }

  .speed-indicator {
    font-size: 8px;
    padding: 1px 4px;
    top: -25px;
  }

  .marker-label {
    font-size: 8px;
  }
}
</style>
